﻿@model HomeCareLibrary.Core.Dtos.CTTaskDetailDto

<!----------------------------------
            Task-tab-detail-page
            -------------------------------->
<div class="detail-page-task">
    <div class="tab-pages detail-page-inn">

        <div class="title clearfix">

            <h1>Task Detail</h1>
            @if (Session[HomeCareLibrary.Constants.SessionConstants.TASK_MONTH] != null && @Session[HomeCareLibrary.Constants.SessionConstants.TASK_YEAR] != null)
            {
                <p>@System.Globalization.CultureInfo.GetCultureInfo("en-us").DateTimeFormat.GetMonthName(Convert.ToInt16(@Session[HomeCareLibrary.Constants.SessionConstants.TASK_MONTH]))  @Session[HomeCareLibrary.Constants.SessionConstants.TASK_YEAR].ToString()</p>
            }
            else
            {
                <p>@System.DateTime.Now.ToString("MMMM", System.Globalization.CultureInfo.InvariantCulture)  @System.DateTime.Now.ToString("YYYY", System.Globalization.CultureInfo.InvariantCulture)</p>
            }
            <div class="top-btn-per clearfix">
                <div class="back-button" id="back-button">
                    <a href="javascript:void(0);" id="btnBackTasksList">
                        <img src="@Url.Content("~/images/personalization-images/back-btn.png")" alt="back-btn" class="back-btn">

                        <div class="back-mob-btn"><span class="glyphicon glyphicon-chevron-left"></span>Back</div>
                    </a>
                </div>
                <div class="ques-button"><a href="#">
                    <img alt="ques-btn" src="@Url.Content("~/images/personalization-images/ques-btn.png")" class="ques-bt">
                    <img alt="ques-btn" src="@Url.Content("~/images/personalization-images/mobques-btn.png")" class="mobques-bt">
                </a></div>
            </div>
        </div>
        <div class="main-content">
            @if (ViewBag.noRecords != string.Empty)
            {
                    
                <span style="text-align: center; color: red; padding-top: 10px; display: block">
                    @ViewBag.noRecords</span>
            }
            else
            {
                         
                <div class="mtt-bg">
                    <div class="top-icon-admin-extra clearfix">
                        @{string taskCodeStatus = ViewBag.taskCodeStatus;
                          if (taskCodeStatus.ToLower().Contains("crc"))
                          {
                            <div class="top-right-panel">
                                <img alt="" src="@Url.Content("~/images/customTask-img/custom-task.png")">
                            </div>
                          }}


                    </div>

                    <div class="group-mtt-outer">

                        <div class="panel-group-mtt clearfix">
                            <div class="media">
                                <a href="#" class="ACR-img">
                                    <img id="imgTaskIamge" src="@Url.Content("~/" + Model.image)" alt="@Model.image">
                                </a>
                                <div class="media-body">
                                    <h4 class="media-heading" id="taskTitle">@Model.feature_name</h4>

                                    <p id="taskDescription">@Model.task_description</p>
                                    <div class="detail-panel clearfix">
                                        <ul class="list-unstyled">
                                            <li><small class="">Priority:</small><span id="imgPriority" data-priority="@Model.priority">
                                                <img src="@Url.Content("~/images/detail-page-img/star" + Model.priority + "-d.png")" alt=""></span></li>
                                            <li><small class="">Type:</small>

                                                @if (taskCodeStatus.ToLower().Contains("crc"))
                                                {
                                                    switch (Model.type)
                                                    {
                                                        case 1:
                                                    <span>inside</span>
                                                            break;
                                                        case 2:
                                                    <span>outside</span>
                                                            break;
                                                        case 3:
                                                    <span>other</span>
                                                            break;
                                                        default:
                                                    <span></span>
                                                            break;
                                                    }
                                                }
                                                else
                                                {
                                                    <span>@Model.task_page_url</span>
                                                }


                                            </li>
                                        </ul>
                                    </div>
                                    <div class="timming">
                                        <small>Recommended Timing:</small>
                                        @{
                                                string yearly = Model.cycle_timing.ToString();
                                                switch (yearly)
                                                {
                                                    case "1":
                                                        yearly = "Once";
                                                        break;
                                                    case "2":
                                                        yearly = "Twice";
                                                        break;
                                                    case "3":
                                                        yearly = "Thrice";
                                                        break;
                                                    default:
                                                        break;
                                                }

                                                string[] monthName = Model.timing_months.Split(',');
                                                string monthsName = string.Empty;
                                                for (int i = 0; i < monthName.Length; i++)
                                                {
                                                    monthsName += @System.Globalization.CultureInfo.GetCultureInfo("en-us").DateTimeFormat.GetMonthName(Convert.ToInt16(monthName[i])) + ", ";
                                                }
                                            <span>@yearly per year, suggested do in @monthsName.Substring(0, monthsName.Length - 2)</span>
                                        }
                                    </div>

                                </div>



                            </div>
                        </div>

                        <div class="detail-pagetab">

                            <ul class="nav nav-tabs" id="myTab">
                                <li class="active benefits"><a data-toggle="tab" href="#detailtab1">Benefits</a></li>
                                <li class="cost"><a data-toggle="tab" href="#detailtab2">Cost</a></li>
                                <li class="helpful-products" style="display:none;"><a data-toggle="tab" href="#detailtab3">Helpful Products</a></li>

                            </ul>
                            <div class="tab-content detail-tabcontent" id="myTabContent">
                                <div id="detailtab1" class="benefits-detailtab tab-pane fade in active">
                                    <ul class="list-unstyled list-inline detailpage-iconList">
                                        @{ 
                                                if (Model.benefit_icons != null && Model.benefit_names != null)
                                                {
                                                    string[] iconBenrfits = null;
                                                    iconBenrfits = Model.benefit_icons.Split(',');

                                                    string[] iconText = null;

                                                    iconText = Model.benefit_names.Split(',');

                                                    for (int i = 0; i < iconBenrfits.Length; i++)
                                                    {
                                            <li>
                                                <img src="@iconBenrfits[i]" alt="" style="height:15px;width:14px;">
                                                <span>@iconText[i]</span></li>
                                                    }

                                                }
                                        }
                                    </ul>
                                    <p class="tabtxt-d">@Model.benefit_content </p>
                                    <div class="energy-savingDiv"><span><small>Energy Savings:</small> @Model.energy_savings_content</span> <span class="energy-savingDiv-img">
                                        @if (@Model.energy_savings_score!=null)
                                        {
                                        <img src="@Url.Content("~/images/detail-page-img/energy_icon" + @Model.energy_savings_score + ".png")" alt="" />
                                        }
                                            
                                                                                                                                            </span></div>
                                    <br />

                                </div>
                                <div id="detailtab2" class="Costs-detailtab tab-pane fade ">
                                    <ul class="list-unstyled list-inline detailpage-iconList">
                                        @for (int i = 1; i <= Model.cost_score; i++)
                                        { 
                                            <li style="padding-right: 0px;">
                                                <img class="img-responsive" src="@Url.Content("~/images/detail-page-img/dollar.png")" title="" alt=""></li>
                                               
                                        }
                                        @for (int i = 1; i <= 5 - Model.cost_score; i++)
                                        { 
                                            <li style="padding-right: 0px;">
                                                <img class="img-responsive" src="@Url.Content("~/images/detail-page-img/dollar-not-s.png")" title="" alt=""></li>
                                        }
                                    </ul>
                                    <p class="tabtxt-d">@Model.cost_content</p>

                                </div>
                                <div id="detailtab3" class="Costs-detailtab tab-pane fade ">
                                    <ul class="list-unstyled list-inline detailpage-iconList">
                                        <li>
                                            <img src="@Url.Content("~/images/mtt-images/setting-icon.png")" alt="">
                                            Health & Savings</li>
                                        <li>
                                            <img src="@Url.Content("~/images/mtt-images/setting-icon.png")" alt="">
                                            Avoiding Unscheduled Repairs</li>
                                        <li>
                                            <img src="@Url.Content("~/images/mtt-images/setting-icon.png")" alt="">
                                            Green</li>
                                        <li>
                                            <img src="@Url.Content("~/images/mtt-images/setting-icon.png")" alt="">
                                            Especially For Elderly</li>
                                    </ul>
                                    <p class="tabtxt-d">To help reduce the humidity in your home, make sure that your basement is dry, and no moisture is penetrating through cracks or seams and...</p>

                                </div>

                            </div>

                        </div>
                        <ul class="list-unstyled list-inline btm-task-detail">
                            @if (!taskCodeStatus.ToLower().Contains("crc"))
                            {
                                <li><a href="javascript:void(0);">
                                    <img src="@Url.Content("~/images/detail-page-img/even_more_info.png")" alt="" />
                                </a></li>
                            }
                            <li class="btnChangePadding"><a href="javascript:void(0);" id="taskCustomizeClick">
                                <img src="@Url.Content("~/images/detail-page-img/change-task.png")" alt="" />
                            </a></li>
                        </ul>
                    </div>


                </div>
                          
            }
            <input type="hidden"  id="hdnTaskCode" value="@ViewBag.taskCodeStatus" />
            <div class="web-next-pre-detailpage">
                <ul class="nav navbar-nav">
                    <li class="previous-detailpage"><a href="javascript:void(0);" class="btnPreviousTask" data-taskCode="@ViewBag.taskCodeStatus">
                        <img src="@Url.Content("~/images/detail-page-img/pre_icon.png")" alt="" /></a></li>
                    <li class="previous-detailpage-txt selected"><a id="" class="btnPreviousTask" data-taskCode="@ViewBag.taskCodeStatus">Previous Task
                    </a></li>
                    <li class="next-detailpage-txt"><a id="" href="javascript:void(0);" class="btnNextTask" data-taskCode="@ViewBag.taskCodeStatus">Next Task
                    </a></li>
                    <li class="next-detailpage"><a href="javascript:void(0);" class="btnNextTask" data-taskCode="@ViewBag.taskCodeStatus">
                        <img src="@Url.Content("~/images/detail-page-img/next_icon.png")" alt="" /></a></li>
                </ul>
            </div>

             @*@if (Session[HomeCareLibrary.Constants.SessionConstants.MODE] != null && (Session[HomeCareLibrary.Constants.SessionConstants.MODE] == HomeCareLibrary.Constants.ApplicationModeConstants.IPHONE_APP || Session[HomeCareLibrary.Constants.SessionConstants.MODE] == HomeCareLibrary.Constants.ApplicationModeConstants.ANDROID_APP))
               { 
                 @:<div class="mobile-menu navbar-fixed-bottom mobile-menu-detailpage taskdetailpage">
             }
                     else{
              *@
            <div class="mobile-menu navbar-fixed-bottom mobile-menu-detailpage">
             
           
                <div class="menu">
                    <ul class="nav navbar-nav">
                        <li class="active previous-detailpage"><a id="btnPreviousTask" href="javascript:void(0);" class="ui-link btnPreviousTask" data-taskCode="@ViewBag.taskCodeStatus">Previous Task
                        </a></li>
                        <li class="next-detailpage"><a id="btnNextTask" href="javascript:void(0);" class="ui-link btnNextTask" data-taskCode="@ViewBag.taskCodeStatus">Next Task
                        </a></li>

                    </ul>
                </div>
            </div>
           
        </div>
    </div>
</div>

<script type="text/javascript">

    $(function () {
        checkscreenWidth();
    });

    //footer is hide for Android and IPhone.
    function checkscreenWidth() {

        var $window = $(window);
        var windowsize = $window.width();

        if (windowsize < 767) {
            $(".mobileMenu").hide();
        }
    }
    $(window).resize(function () {
        checkscreenWidth();
    });
    </script>